<template>
  <div class="main-content">
    <SoldLineChart/>
    <!-- 查询窗口 -->
    <QueryForm @search="handleSearch" />
    <BizTable
      :table-data="tableData"
      :page-record="pageRecord"
      :handle-size-change="handleSizeChange"
      :handle-current-change="handleCurrentChange"
      :handle-refresh="fetchData"
    />
  </div>
</template>

<script>
import SoldLineChart from './cmpts/SoldLineChart.vue'
import QueryForm from '@/views/product/purchase/cmpts/QueryForm.vue'
import BizTable from '@/views/product/purchase/cmpts/BizTable.vue'
import { queryProductWithSpecification } from '@/api/purchase'

export default {
  name: 'Purchase',
  components: { BizTable, QueryForm, SoldLineChart },
  data() {
    return {
      // cake: fill填入的是同一个对象
      tableData: [],
      pageRecord: {
        current: 1,
        total: 5,
        size: 5,
        pageSizeList: [5, 10, 15, 20]
      },
    }
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    async fetchData(queryData = {}) {
      const {data: {records, current, size, total}} = await queryProductWithSpecification({ ...queryData, ...this.pageRecord });
      this.pageRecord.current = Number(current);
      this.pageRecord.size = Number(size);
      this.pageRecord.total = Number(total);
      this.tableData = records;
    },
    async handleSearch(queryParams) {
      await this.fetchData(queryParams)
    },
    handleSizeChange(val) {
      this.pageRecord.size = val;
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.pageRecord.current = val;
      this.fetchData()
    }
  }
}
</script>

<style scoped lang="scss">
.main-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.btn:not(:nth-child(1)) {
  margin-left: 20px;
}

.query-form-container {
  padding: 10px 15px;
  box-sizing: border-box;
  border: 2px dashed rgb(211, 211, 211);
}
</style>
